<template>
    <div class="MSD-item">
        <div class="title">
            {{ title }}
        </div>
        <div class="pie">
            <div class="chart">
                <Pie :data="dataInfo" :colors="colors" />
            </div>
            <div class="item-box">
                <div v-for="(item, index) in handleSort(list)" :key="index + 'info'" class="info-item">
                    <div class="left-box">
                        <div class="name">
                            {{ nameMap[item.resourceOwner].name }} <span
                                class="icon"
                                :style="{ backgroundColor: nameMap[item.resourceOwner].color }"
                            ></span>
                        </div>
                        <div class="value">
                            {{ $numberWithCommas(item.resourceNum) }}
                        </div>
                    </div>
                    <!-- <div class="percentage">
                        {{ item.resourcePercent }}%
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts"  setup>
import { toRefs, computed, PropType } from 'vue';
import Pie from './Pie.vue';
import { Items } from './msd.module';

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    list: {
        type: Array as PropType<Items[]>,
        required: false,
        default: () => []
    }
});
const { title, list } = toRefs(props);

const nameMap: { [key: number]: { name: string, color: string } } = {
    0: { name: '共有', color: '#FF7C12' },
    1: { name: '新潮', color: '#E60044' },
    2: { name: '分众', color: '#397FF8' }
};

const dataInfo = computed(() => {
    return list.value.map((item: Items) => ({ value: +item.resourceNum }));
});
// const colors = ['#E60044', '#397FF8', '#FF7C12', '#B5B5B5'];
const colors = list.value.map((item: Items) => nameMap[item.resourceOwner].color);

const handleSort = (arr: Items[]): Items[] => {
    const result: Items[] = [];
    [1, 2, 0].forEach(v => {
        const obj = arr.find((item: Items) => item.resourceOwner === v);
        obj && result.push(obj);
    });

    return result;
};

</script>

<style lang="scss" scoped>
.MSD-item {
    border: 0.5px solid #eeeeee;
    border-radius: 4px;
    padding: 16px 12px;
    margin: 0 12px;

    &:not(:last-of-type) {
        margin-bottom: 12px;
    }

    .title {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
    }

    .pie {
        margin-top: 16px;
        display: flex;
        align-items: center;

        .chart {
            // width: 120px;
        }

        .item-box {
            flex: 1;
            margin-left: 32px;
        }
    }

    .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .left-box {
            display: flex;
            align-items: center;
        }

        .name {
            display: flex;
            align-items: center;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
            margin-right: 24px;

            .icon {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-left: 4px;
            }
        }
        .value {
            font-size: 14px;
        }
    }
}
</style>
